<template>
    <div>
        <div style="margin: 10px 0">
            <el-form :model="pagequery" ref="queryForm" size="small" :inline="true" label-width="68px">
                <el-form-item label="菜单名称" prop="title">
                    <el-input
                            v-model="pagequery.menuName"
                            placeholder="请输入菜单名称"
                            clearable
                            style="width: 240px;"
                            @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="load">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>

        </div>

        <div style="margin: 10px 0">
            <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
            >新增
            </el-button>
            <el-button
                    class="ml-5"
                    type="info"
                    plain
                    icon="el-icon-sort"
                    size="mini"
                    @click="toggleExpandAll"
            >展开/折叠
            </el-button>
        </div>

        <el-table ref="multipleTable" :data="tableData" border v-loading="loading"
                  v-if="refreshTable"
                  stripe row-key="id" :default-expand-all="isExpandAll">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column label="图标" class-name="fontSize18" align="center" label-class-name="fontSize12">
                <template slot-scope="scope">
                    <span :class="scope.row.icon"/>
                </template>
            </el-table-column>
            <el-table-column prop="sortNum" label="排序"></el-table-column>
            <el-table-column prop="permission"  width="200" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="path" label="路由路径"></el-table-column>
            <el-table-column prop="pagePath" label="文件路径"></el-table-column>
            <el-table-column fixed="right" label="操作" width="300" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)"
                            slot="reference"><i class="el-icon-edit"></i>修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="text"
                            @click="handleAdd(scope.row)"
                            slot="reference"><i class="el-icon-plus"></i>新增
                    </el-button>
                    <el-popconfirm
                            confirm-button-text='确定'
                            cancel-button-text='我再想想'
                            icon="el-icon-info"
                            icon-color="red"
                            title="您确定删除吗？"
                            @confirm="handleDelete(scope.row)"
                    >
                        <el-button style="margin: 0 10px" size="mini"
                                   type="text"
                                   slot="reference"><i class="el-icon-delete"></i>删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加或修改菜单对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="680px" append-to-body>
            <el-form ref="menuForm" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="上级菜单" prop="parentId">
                    <treeselect
                            v-model="form.pid"
                            :options="menus"
                            :normalizer="normalizer"
                            :show-count="true"
                            placeholder="选择上级菜单"
                    />
                </el-form-item>
                <el-row>
                    <el-col :span="24">

                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="菜单类型" prop="menuType">
                            <el-radio-group v-model="form.menuType">
                                <el-radio label="M">目录</el-radio>
                                <el-radio label="C">菜单</el-radio>
                                <el-radio label="F">按钮</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="form.menuType != 'F'">
                        <el-form-item prop="icon" label="图标">
                            <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 100%">
                                <el-option v-for="item in options" :key="item.id" :label="item.name"
                                           :value="item.value">
                                    <i :class="item.value" style="margin: 0px"/> {{ item.name }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="菜单名称" prop="menuName">
                            <el-input v-model="form.name" placeholder="请输入菜单名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示排序" prop="orderNum">
                            <el-input-number v-model="form.sortNum" controls-position="right" :min="0"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.menuType != 'F'">
                        <el-form-item prop="path">
              <span slot="label">
                <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                路由地址
              </span>
                            <el-input v-model="form.path" placeholder="请输入路由地址"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.menuType == 'C'">
                        <el-form-item prop="pagePath">
              <span slot="label">
                <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                组件路径
              </span>
                            <el-input v-model="form.pagePath" placeholder="请输入组件路径"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="form.menuType != 'M'">
                        <el-form-item prop="permission">
                            <el-input v-model="form.permission" placeholder="请输入权限标识" maxlength="100"/>
                            <span slot="label">
                <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(hasPermission(system:user:edit)" placement="top">
                <i class="el-icon-question"></i>
                </el-tooltip>
                权限字符
              </span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    import {getMenus, addMenu, updateMenu, getMenusIcon, delMenuById, getMenu} from '@/api/system/menu'
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "Menu",
        components: {Treeselect},
        data() {
            return {
                // 是否展开，默认全部展开
                isExpandAll: false,
                // 重新渲染表格状态
                refreshTable: true,
                // 遮罩层
                loading: true,
                tableData: [],
                total: 0,
                title: '',
                menus: [],
                pagequery: {},
                form: {
                    menuType: 'M',
                    sortNum: 100,
                },
                dialogFormVisible: false,
                options: [],
                rules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'},
                    ],
                    path: [
                        {required: true, message: '请输入路径', trigger: 'blur'},
                        {pattern: /^\/.*$/, message: '请以斜杠开头'}
                    ],
                    pagePath: [
                        {required: true, message: '请输入文件路径', trigger: 'blur'},
                        {pattern: /^\/.*$/, message: '请以斜杠开头'}
                    ],
                    permission: [
                        {required: true, message: '请输入权限标识', trigger: 'blur'},
                    ],
                }
            }
        },
        created() {
            this.load()
        },
        methods: { // 当用户手动勾选全选 Checkbox 时触发的事件
            /** 转换菜单数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children
                };
            },
            load() {
                this.loading = true
                getMenus(this.pagequery.menuName).then(res => {
                    this.tableData = res.data
                    this.menus = res.data
                    // 请求图标的数据
                    getMenusIcon().then(res => {
                        this.options = res.data
                    })
                    this.loading = false
                })

            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["menuForm"].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            updateMenu(this.form).then(res => {
                                if(res.code===200) {
                                    this.$message.success("修改成功");
                                    this.dialogFormVisible = false;
                                    this.load();
                                }
                            });
                        } else {
                            addMenu(this.form).then(res => {
                                if(res.code===200) {
                                    this.$message.success("新增成功");
                                    this.dialogFormVisible = false;
                                    this.load();
                                }
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const menuIds = row?.id || this.ids;
                if (menuIds.length <= 0) {
                    this.$message.warning("请选择删除的菜单")
                    return
                }
                delMenuById(menuIds).then(res => {
                    if (res.code === 200) {
                        this.$message.success("删除成功")
                        this.load();
                    } else if (res.code === 1010 || res.code === 1011) {
                        this.$message.warning(res.msg)
                    }
                })
            },
            handleAdd(row) {
                this.form = {
                    menuType: 'M',
                    sortNum: 1
                }
                this.title = '添加菜单'
                this.dialogFormVisible = true
                this.form.pid = row?.id
            },
            //修改
            handleEdit(row) {
                const menuId = row.id
                getMenu(menuId).then(response => {
                    this.form = response.data
                    this.title = '修改菜单'
                });
                this.dialogFormVisible = true
            },
            reset() {
                this.pagequery = {}
                this.load()
            },
            /** 展开/折叠操作 */
            toggleExpandAll() {
                this.refreshTable = false;
                this.isExpandAll = !this.isExpandAll;
                this.$nextTick(() => {
                    this.refreshTable = true;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.load();
            },
            //获取时间区间方法
            dateFormat(picker) {
                this.pagequery.startTime = picker[0]
                this.pagequery.endTime = picker[1]
            },
        }
    }
</script>


<style>
    .fontSize18 {
        font-size: 18px;
    }

    .fontSize12 {
        font-size: 12px;
    }
</style>
